
<template>
  <div class="custom">
    <div style="height:40px"></div>
    <van-notice-bar
      left-icon="volume-o"
      text="我们的软件还在不断完善中，如果发现bug记得向我们反馈哦。"
    />
    <div class="van-nav-bar__content">
      <div class="van-nav-bar__title van-ellipsis ziti2">使用帮助</div>
    </div>


    <div data-v-16a21f0e="" class="cell">
      <div data-v-16a21f0e="" class="van-cell">
        <div data-v-16a21f0e="" class="van-cell__value van-cell__value--alone">
          <img
            data-v-16a21f0e=""
            width="23px"
            src="icons8-faq-96.png"
            alt=""
          /><span data-v-16a21f0e="" class="spanTitle ziti1">常见问题</span>
        </div>
      </div>

    <div>

      <van-cell is-link title="1.优惠券如何使用？" @click="show1 = true" />
      <van-cell is-link title="2.取消订单后钱什么时候到账？" @click="show2 = true" />
      <van-cell is-link title="3.可以固定同一个阿姨服务吗？" @click="show3 = true" />
      <van-cell is-link title="4.如何选择上一次服务的阿姨？" @click="show4 = true" />
      <van-cell is-link title="5.预约成功后在哪查看？" @click="show5 = true" />

      <van-dialog v-model="show1"  >
        <div class="img_tanchu">
          <img src="icons8-get-revenue-96.png" />
        </div>
        <div class="ziti2">
          关于优惠卷，我们是没有任何优惠的,所以别想了 真的
        </div>     
      </van-dialog> 
      
      <van-dialog v-model="show2"  >
        <div class="img_tanchu">
          <img src="icons8-online-support-96.png" />
        </div>
        <div class="ziti_tanchu">
          我也不知道
        </div>     
      </van-dialog> 

      <van-dialog v-model="show3"  >
        <div class="img_tanchu">
          <img src="icons8-facebook-like-96.png" />
        </div>
        <div class="ziti2">
          你居然还想让同一个阿姨服务天天给你服务，真有你的
        </div>     
      </van-dialog> 

      <van-dialog v-model="show4"  >
        <div class="img_tanchu">
          <img src="icons8-frida-kahlo-96.png" />
        </div>
        <div class="ziti_tanchu">
          给钱就行啦
        </div>     
      </van-dialog> 

      <van-dialog v-model="show5"  >
        <div class="img_tanchu">
          <img src="icons8-online-support-96.png" />
        </div>
        <div class="ziti_tanchu">
          在你的订单页面 在你的订单页面 在你的订单页面 在你的订单页面 在你的订单页面
        </div>     
      </van-dialog> 

    </div>

      
      

      <div data-v-16a21f0e="" class="van-cell">
        <div data-v-16a21f0e="" class="van-cell__value van-cell__value--alone">
          <img
            data-v-16a21f0e=""
            width="21px"
            src="icons8-broken-heart-96.png"
            alt=""
          /><span data-v-16a21f0e="" class="spanTitle ziti1">更多问题</span>
        </div>
      </div>
      <div data-v-16a21f0e="" class="van-grid van-hairline--top">
        <div
          data-v-16a21f0e=""
          class="van-grid-item"
          style="flex-basis: 33.3333%"
        >
          <div
            class="
              van-grid-item__content van-grid-item__content--center
              van-hairline
            "
          >
            <span class="van-grid-item__text">订单相关</span>
          </div>
        </div>
        <div
          data-v-16a21f0e=""
          class="van-grid-item"
          style="flex-basis: 33.3333%"
        >
          <div
            class="
              van-grid-item__content van-grid-item__content--center
              van-hairline
            "
          >
            <span class="van-grid-item__text">客户端使用</span>
          </div>
        </div>
        <div
          data-v-16a21f0e=""
          class="van-grid-item"
          style="flex-basis: 33.3333%"
        >
          <div
            class="
              van-grid-item__content van-grid-item__content--center
              van-hairline
            "
          >
            <span class="van-grid-item__text">优惠券与活动</span>
          </div>
        </div>
        <div
          data-v-16a21f0e=""
          class="van-grid-item"
          style="flex-basis: 33.3333%"
        >
          <div
            class="
              van-grid-item__content van-grid-item__content--center
              van-hairline
            "
          >
            <span class="van-grid-item__text">支付与费用</span>
           </div>
        </div>
        <div
          data-v-16a21f0e=""
          class="van-grid-item"
          style="flex-basis: 33.3333%"
        >
          <div
            class="
              van-grid-item__content van-grid-item__content--center
              van-hairline
            "
          >
            <span class="van-grid-item__text">服务相关</span>
          </div>
        </div>
      </div>
    </div>

    <div>
      <div class="van-nav-bar__content">
        <div class="van-nav-bar__title van-ellipsis ziti2">给软件打个分吧</div>
      </div>

      <div class="pingfen">
        <van-rate v-model="value" />
      </div>
      <div class="tijiaoanniu2">
        <van-button round type="default" class="tijiaoanniu" @click="xinxin"
          >提交</van-button
        >
      </div>
    </div>

    

  

  </div>
</template>

<script>
import Vue from 'vue'
import { NoticeBar } from "vant";
import { Rate } from "vant";
import { Button } from "vant";
import { Toast } from "vant";
import { ActionSheet } from 'vant';
import { Dialog } from "vant";

Vue.use(NoticeBar);
Vue.use(Rate);
Vue.use(Button);
Vue.use(Toast);
Vue.use(ActionSheet);
Vue.use(Dialog);

export default {
  data() {
    return {
      value: 3,
      show1: false,
      show2: false,
      show3: false,
      show4: false,
      show5: false,
    };
  },
  methods: {
    xinxin() {
      Toast("评分成功，谢谢反馈");
    },
  },

};
</script>

<style scoped>
.ziti1 {
  font-size: 15px;
}
.ziti2 {
  font-size: 20px;
}
.ziti_tanchu{
  text-align: center;
  font-size: 20px;
}
.tijiaoanniu {
  font-size: 10px;
  height: 25px;
}
.tijiaoanniu2,.pingfen,.img_tanchu{
  text-align: center;
}

</style>